<template>
    <div class="header-com">
        <span v-if="userStore.is_login" class="login-btn">{{ userStore.username }}</span>
        <span v-else class="login-btn">
            <router-link to="/login">登录</router-link>
        </span>

        <van-button @click="searchHandler" v-if="$route.meta.search" type="danger" size="mini" class="search-btn">搜索</van-button>

        <van-search   @focus="$router.push('/search')" style="margin-right: 50px; margin-left: 40px;" v-if="$route.meta.home" shape="round" background="#c82519" placeholder="搜索">
            <template #left>
                <van-icon name="wap-nav" class="header-more" size="32" />
            </template>
        </van-search>

         <van-nav-bar v-else :right-text="$route.meta.more? '...': '' " left-arrow  @click-left="onClickLeft">
            <template #title>
        <span v-if="title">{{ title }}</span>
        <van-search
          v-else
          @focus="$router.push('/search')"
          v-model="searchText"  
          shape="round"
          @update:model-value="searchChangeHandler"
          placeholder="请输入搜索关键词" />
      </template>
        </van-nav-bar>
    </div>
</template>

<script lang="ts" setup>
import { useRoute,RouterLink } from 'vue-router'; 
import { onMounted,ref } from 'vue';
import  useUserInfo  from '@/stores/users'
import { watch } from 'vue';
const userStore =useUserInfo()
const $route = useRoute()
const searchText = ref<string>('')
// interface userInfo {
//     username: string,
//     userid: string,
//     avatar: string,
//     [key:string]: any
// }
// interface  ResponseInfo {
//     code: String
//     message: string
//     data:Array<userInfo>
// }
type Props ={
  title?: string
  str?:string
}
// 接受传递过来的参数
 const info =defineProps<Props>()

 watch(()=>info.str,()=>{
    // console.log('发生变化了')
    searchText.value=info.str || '电脑'
 },
 {immediate:true})

//根据关键字获取商品列表
//准备一个数据
const count = ref<Number>(0)

//验证登录的函数
const testlogin=async()=>{
    const token = window.localStorage.getItem('token')
    const id = window.localStorage.getItem('user_id')
    if(!token || !id) {
        userStore.changeLogin(false)
            return
        } 
        userStore.getUser(id)
}
onMounted(()=>{
    testlogin()
    
})
//定义事件遥控器
const emit = defineEmits(['searchChangeHandler','searchBtnHandler'])
const searchHandler =()=>{
    emit('searchBtnHandler', searchText.value.trim())
}
//搜索框发生变化的时候触发
const searchChangeHandler = () => {

    searchText.value = searchText.value.replaceAll('\\', '')
  // 需要把我搜索关键字的内容传递到 父组件内 使用
  emit('searchChangeHandler', searchText.value.trim())
}


//我需要把我搜索到的关键字 传给父组件用

//返回上一级
const onClickLeft=()=>{
    history.back()
}
</script>   

<style scoped>
.header-com{
    background-color:#c82519 ;
    position: relative;
}
.login-btn{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #fff;
}
.header-more{
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    color: #fff;
}
.search-btn{
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    height: 30px;
    padding: 6px;
    box-sizing: border-box;
    background-color: #e93b3d;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 50px;
}


</style>